<template>
    <layout :config="navConfig">
        <template #default>
            <div class="m-review-tab">
                <label>
                    <input type="radio" v-model="activeTab" :value="0">
                    <span>订单1</span>
                </label>
                <label>
                    <input type="radio" v-model="activeTab" :value="1">
                    <span>订单2</span>
                </label>
                <label>
                    <input type="radio" v-model="activeTab" :value="2">
                    <span>订单3</span>
                </label>
            </div>

            <div class="m-review-form" v-show="activeTab===0">
                <div class="form-col">
                <div class="col-text">上级账户</div>
                <input type="tel" v-model="formData_0.payuser">
                </div>
                <div class="form-col">
                    <div class="col-text">上级微信</div>
                    <input type="text" v-model="formData_0.bwechatqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级支付宝</div>
                    <input type="text" v-model="formData_0.balypayqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行</div>
                    <input type="text" v-model="formData_0.bbankname">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行卡号</div>
                    <input type="number" v-model="formData_0.bbanknum">
                </div>
                <div class="form-col">
                    <div class="col-text">收货地址</div>
                    <input type="text" v-model="formData_0.address">
                </div>
                <div class="form-col">
                    <div class="col-text">付款金额</div>
                    <input type="text" v-model="formData_0.money">
                </div>
                <div class="form-col">
                    <div class="col-text">产品</div>
                    <input type="text" v-model="formData_0.prod">
                </div>
                <div class="m-task-status" v-if="formData_0.is_pay==='3'">
                <span class="success">
                 <i class="iconfont icon-checkbox-circle-line"></i>
                  <span>打款信息已提交</span>
                 </span>
                </div>

                <div class="m-task-status" v-if="formData_0.is_pay==='0'">
                     <span class="failed">
                    <i class="iconfont icon-close-circle-fill"></i>
                   <span>付款信息未提交</span>
                    </span>
                </div>

            </div>

            <div class="m-review-form" v-show="activeTab===1">
                <div class="form-col">
                <div class="col-text">上级账户</div>
                <input type="tel" v-model="formData_1.payuser">
            </div>
                <div class="form-col">
                    <div class="col-text">上级微信</div>
                    <input type="text" v-model="formData_1.bwechatqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级支付宝</div>
                    <input type="text" v-model="formData_1.balypayqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行</div>
                    <input type="text" v-model="formData_1.bbankname">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行卡号</div>
                    <input type="number" v-model="formData_1.bbanknum">
                </div>
                <div class="form-col">
                    <div class="col-text">收货地址</div>
                    <input type="text" v-model="formData_1.address">
                </div>
                <div class="form-col">
                    <div class="col-text">付款金额</div>
                    <input type="text" v-model="formData_1.money">
                </div>
                <div class="form-col">
                    <div class="col-text">产品</div>
                    <input type="text" v-model="formData_1.prod">
                </div>
                <div class="m-task-status" v-if="formData_1.is_pay==='3'">
                <span class="success">
                 <i class="iconfont icon-checkbox-circle-line"></i>
                  <span>打款信息已提交</span>
                 </span>
                </div>
                <div class="m-task-status" v-if="formData_1.is_pay==='0'">
                     <span class="failed">
                    <i class="iconfont icon-close-circle-fill"></i>
                   <span>付款信息未提交</span>
                    </span>
                </div>

            </div>

            <div class="m-review-form" v-show="activeTab===2">
                <div class="form-col">
                <div class="col-text">上级账户</div>
                <input type="tel" v-model="formData_2.payuser">
            </div>
                <div class="form-col">
                    <div class="col-text">上级微信</div>
                    <input type="text" v-model="formData_2.bwechatqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级支付宝</div>
                    <input type="text" v-model="formData_2.balypayqrcode">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行</div>
                    <input type="text" v-model="formData_2.bbankname">
                </div>
                <div class="form-col">
                    <div class="col-text">上级开户银行卡号</div>
                    <input type="number" v-model="formData_2.bbanknum">
                </div>
                <div class="form-col">
                    <div class="col-text">收货地址</div>
                    <input type="text" v-model="formData_2.address">
                </div>
                <div class="form-col">
                    <div class="col-text">付款金额</div>
                    <input type="text" v-model="formData_2.money">
                </div>
                <div class="form-col">
                    <div class="col-text">产品</div>
                    <input type="text" v-model="formData_2.prod">
                </div>
                <div class="m-task-status" v-if="formData_2.is_pay==='3'">
                <span class="success">
                 <i class="iconfont icon-checkbox-circle-line"></i>
                  <span>打款信息已提交</span>
                 </span>
                </div>
                <div class="m-task-status" v-if="formData_2.is_pay==='0'">
                     <span class="failed">
                    <i class="iconfont icon-close-circle-fill"></i>
                   <span>付款信息未提交</span>
                    </span>
                </div>
            </div>

            <button class="m-review-button" @click="confirm">确认打款</button>
        </template>
    </layout>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import {INavigation} from "@/types";
    import qrCode from "vue-qr";
    import {Toast} from "mand-mobile";

    @Component({
        name: "Review",
        components: {
            qrCode
        },
        created: function () {
            try {

                let usera = JSON.parse(localStorage.getItem('users1'));

                if (usera == null) {
                    this.$router.push({
                        path: '/login'
                    })
                    return;
                }

                Toast.loading(window.localStorage.getItem('users1'));
                Toast.loading("请求中...");

                this.$api.paylist({'search_EQ_a.username': usera.username}).then(res => {
                    Toast.hide();

                    if (res.data.length == 0) {

                        Toast.loading("请先购买星级任务，并等待审核！", 2000);
                        return;
                    }
                    for (var i = 0; i < res.data.length; i++) {
                        var is_pid = res.data[i].is_pid;
                        if (is_pid == "1") {
                            this.formData_0 = res.data[i];
                            let money = 0;
                            let type = res.data[i].type;
                            money = 100 * 0.5 * Math.pow(2, type);
                            this.formData_0.money = money;
                            res.data.remove(i);
                        }
                    }
                    if (res.success == 200) {
                        if (res.data.length >= 1) {
                            let money = 0;
                            let type = res.data[0].type;
                            money = 100 * 0.25 * Math.pow(2, type);
                            this.formData_1 = res.data[0];
                            this.formData_1.moeny = money;
                            this.formData_2 = res.data[1];
                            this.formData_2.moeny = money;
                        }
                    }
                    this.setrandom();
                }).catch(res => {
                    Toast.hide();
                    this.setrandom();
                });

            } catch (e) {
                Toast.info("系统错误");
                this.setrandom();
                // Toast.hide();
            }

        },
    })
    export default class extends Vue {
        navConfig: INavigation = {
            text: "匹配审核"
        };
        addre = ["西藏拉萨市林廓北路拉萨中学对面",
            "河南省郑州市金水区博颂路24号",
            "北京市朝阳区工体西路6号",
            "北京市朝阳区三里屯路33大厦10号",
            "上海市浦东新区陆家嘴西路168号",
            "上海市长宁区长宁路1018号",
            " 上海市杨浦区翔殷路1099号",
            "南开区水上公园东路阳光",
            "南开区水上公园东路阳光",
            "中国浙江省杭州市江干区东宁路599号",
            "中国浙江省杭州市江干区明月桥路与新塘路交汇处"];
        prodre = ["华裔实木衣柜",
            "安娜贝拉美容套装",
            "赫莲拉美容套装",
            "雪花秀套装礼盒",
            "波尔多干红礼盒",
            "梅洛干红礼盒",
            " 上梅多克干红礼盒",
            "圣克里斯多非干红礼盒",
            "哥特手包",
            "VUNIQSON手包",
            "Versace 美杜莎手拿包 "];
        activeTab = 0;
        formData_0 = {
            id: "",
            phone: "",
            alypayqrcode: "",
            bwechatqrcode: "",
            bbankname: "",
            bbanknum: "",
            type: "",
            weChat: "",
            card: "",
            address: "",
            money: "0",
            prod: "",
            is_pay: "0",
            qrCode: ""
        };
        formData_1 = {
            id: "",
            phone: "",
            alypayqrcode: "",
            bwechatqrcode: "",
            bbankname: "",
            bbanknum: "",
            type: "",
            weChat: "",
            card: "",
            money: "0",
            prod: "",
            address: "",
            is_pay: "0",
            qrCode: ""
        };
        formData_2 = {
            id: "",
            phone: "",
            type: "",
            alypayqrcode: "",
            bwechatqrcode: "",
            bbankname: "",
            bbanknum: "",
            weChat: "",
            prod: "",
            money: "0",
            address: "",
            card: "",
            is_pay: "0",
            qrCode: ""
        };

        confirm() {
            let param = {};

            if ((this.activeTab == "0")) {
                param = this.formData_0;
            }
            if ((this.activeTab == "1")) {
                param = this.formData_1;
            }
            if ((this.activeTab == "2")) {
                param = this.formData_2;
            }
            if (param.is_pay == "3") {
                Toast.info('信息已提交！', 500);
                return;
            }

            let money = param.type

            this.$router.push({
                path: '/comfirmPay',
                query: {
                    userpayid: param.id,
                    money: param.money,
                    flag: 2
                }
            })
        };
        setrandom(){
            let a = Math.floor(Math.random() * 10);
            let b = Math.floor(Math.random() * 10);
            let c = Math.floor(Math.random() * 10);
            let adda = this.addre[a];
            let addb = this.addre[b];
            let addc = this.addre[c];
            this.formData_0.address = adda;
            this.formData_1.address = addb;
            this.formData_2.address = addc;
            this.formData_0.prod = this.prodre[a];
            this.formData_1.prod = this.prodre[b];
            this.formData_2.prod = this.prodre[c];
        }

    }
</script>

<style lang="scss">
    @import "../assets/styles/review.scss";
    @import "../assets/styles/match_history.scss";
</style>

